<script setup>
import { ref, watch, nextTick } from 'vue'
import {
  patientEditPatientService,
  patientEditPatientHistoryService,
  patientEditPatientSystemicDiseaseService
} from '@/api/patient'
import { planEditRecordService } from '@/api/designPlan'

// 导入element-plus组件的Plus图标
import { Plus, Delete, View } from '@element-plus/icons-vue'

import SymptomRadio from '@/views/scheme_design/components/SymptomRadio.vue'

// 显示抽屉
const visibleDrawer = ref(false)

// 绑定抽屉
const drawerRef = ref()

// 绑定滚动条
const scrollbarRef = ref(null)

// 患者信息
const patientInfo = ref({
  id: '',
  name: '',
  gender: '',
  age: '',
  idCard: '',
  birthTime: ''
})

// 问诊记录
const recordInfo = ref({
  id: '',
  mainComplaint: '',
  currentHistory: ''
})

// 患者病史
const patientHistory = ref({
  pastHistory: '',
  personalHistory: '',
  familyHistory: ''
})

// 全身状况表单
const systemicDiseaseRecord = ref({})

// 影像学检查图片
const imageCheck = ref()
// 图片回显和图片赋值
const onUploadImageCheck = (file) => {
  // 读取图片文件
  const reader = new FileReader()
  // 绑定onload事件，读取图片数据并更新imgUrl
  // 注意：这里的imgUrl.value = reader.result是异步的，所以需要在onload事件中更新imgUrl
  reader.readAsDataURL(file.raw)
  reader.onload = () => {
    imageCheck.value = reader.result
  }
}
// 删除图片
const deleteImageCheck = (event) => {
  event.stopPropagation() // 阻止事件冒泡
  imageCheck.value = ''
}
// 预览图片
const previewImageCheckVisible = ref(false)
const handlePreview = () => {
  previewImageCheckVisible.value = true
}

// 口内图片
const mouthImages = ref([])
const previewMouthImageVisible = ref(false)
const currentPreviewImage = ref('')
const mouthImageUploadRef = ref(null)
// 设置图片展示的顺序
const count = ref(0)
// 图片回显和图片赋值
const onUploadMouthImage = (file) => {
  // console.log(file)
  // console.log(count.value)
  if (file) {
    // 调用这个方法, 让count自增
    count.value += 1
  }
  // 读取图片文件
  const reader = new FileReader()
  // 给reader 设置一个id属性, 因为reader.readAsDataURL是异步的, 所以需要设置一个id来标识图片
  // 注意：这里的mouthImages.value.push({url: reader.result, id: reader.id})是异步的,
  // 所以需要在onload事件中更新mouthImages.value
  reader.id = count.value
  reader.readAsDataURL(file.raw)
  reader.onload = () => {
    mouthImages.value.push({
      url: reader.result,
      // 设置当前count作为图片id
      id: reader.id
    })
    // 根据 id 排序
    mouthImages.value.sort((a, b) => a.id - b.id)
  }
  // console.log(mouthImages.value)
}
// 删除图片
const deleteMouthImage = (index) => {
  mouthImages.value.splice(index, 1)
}
// 预览图片
const handlePreviewMouthImage = (index) => {
  currentPreviewImage.value = mouthImages.value[index]
  previewMouthImageVisible.value = true
}

// 接收父组件传过来的患者信息
const props = defineProps({
  patient: {
    type: Object,
    required: true
  },
  currentRecord: {
    type: Object,
    required: true
  }
})

// 绑定表单
const formRef = ref(null)

// 定义表单规则
const rules = ref({})

// 定义通知父组件的方法
const emit = defineEmits(['refresh'])
// 提交表单
const submit = async () => {
  // 更新患者信息
  // console.log('基本信息', patientInfo.value)
  // 发送编辑患者信息请求
  await patientEditPatientService(patientInfo.value)

  // 更新问诊记录
  // console.log('问诊记录', recordInfo.value)
  // console.log('口内图片', mouthImages.value)
  // console.log('影像学检查图片', imageCheck.value)
  // 定义请求参数
  const recordParams = {
    diagnosticRecord: {
      id: recordInfo.value.id,
      patientId: recordInfo.value.patientId,
      mainComplaint: recordInfo.value.mainComplaint,
      currentHistory: recordInfo.value.currentHistory,
      statue: recordInfo.value.statue,
      imageCheck: imageCheck.value
    },
    mouthImages: mouthImages.value.map((item) => item.url)
  }
  // 发送编辑问诊记录请求
  await planEditRecordService(recordParams)

  // 更新患者病史
  // console.log('患者病史', patientHistory.value)
  await patientEditPatientHistoryService(
    patientHistory.value
  )

  // 更新 全身病史
  // console.log('全身病史', systemicDiseaseRecord.value)
  // 发送编辑全身病史请求
  await patientEditPatientSystemicDiseaseService(
    systemicDiseaseRecord.value
  )

  // 关闭抽屉
  visibleDrawer.value = false
  // 提醒更新成功
  ElMessage.success('更新成功')
  // 刷新父组件
  emit('refresh')
}

// vue3如果抽屉关闭, 滚动条回到顶部
watch(visibleDrawer, () => {
  if (visibleDrawer.value === false) {
    patientInfo.value = {}
    recordInfo.value = {}
    patientHistory.value = {}
    systemicDiseaseRecord.value = {}
    mouthImages.value = []
    imageCheck.value = ''
    currentPreviewImage.value = ''
    previewMouthImageVisible.value = false
    previewImageCheckVisible.value = false
    isShowSymptom.value = false
    count.value = 0
    flag.value = false
    defaultSystemicDiseaseRecord.value = {
      isShowSymptom: '0',
      // 高血压
      highBloodPressure: '0',
      highBloodPressureIndicate: '',
      isHighBloodPressureMedication: '0',
      highBloodPressureMedication: '',
      // 糖尿病
      diabetes: '0',
      diabetesIndicate: '',
      isDiabetesMedication: '0',
      diabetesMedication: '',
      // 冠心病
      coronaryHeartDisease: '0',
      coronaryHeartDiseaseIndicate: '',
      isCoronaryHeartDiseaseMedication: '0',
      coronaryHeartDiseaseMedication: '',
      // 脑血管疾病
      cerebrovascularDisease: '0',
      cerebrovascularDiseaseIndicate: '',
      isCerebrovascularDiseaseMedication: '0',
      cerebrovascularDiseaseMedication: '',
      // 动脉粥样硬化
      atherosclerosis: '0',
      atherosclerosisIndicate: '',
      isAtherosclerosisMedication: '0',
      atherosclerosisMedication: '',
      // 肺部疾病
      lungDisease: '0',
      lungDiseaseIndicate: '',
      isLungDiseaseMedication: '0',
      lungDiseaseMedication: '',
      // 胃肠道病
      gastrointestinalDisease: '0',
      gastrointestinalDiseaseIndicate: '',
      isGastrointestinalDiseaseMedication: '0',
      gastrointestinalDiseaseMedication: '',
      // 类风湿性关节炎
      rheumatoidArthritis: '0',
      rheumatoidArthritisIndicate: '',
      isRheumatoidArthritisMedication: '0',
      rheumatoidArthritisMedication: '',
      // 骨质疏松
      osteoporosis: '0',
      osteoporosisIndicate: '',
      isOsteoporosisMedication: '0',
      osteoporosisMedication: '',
      // 血液病
      hemopathy: '0',
      hemopathyIndicate: '',
      isHemopathyMedication: '0',
      hemopathyMedication: '',
      // 肝胆病
      hepatobiliaryDisease: '0',
      hepatobiliaryDiseaseIndicate: '',
      isHepatobiliaryDiseaseMedication: '0',
      hepatobiliaryDiseaseMedication: '',
      // 其他疾病
      otherDisease: '0',
      otherDiseaseIndicate: '',
      isOtherDiseaseMedication: '0',
      otherDiseaseMedication: '',
      // 心脑血管手术
      cardiacCerebrovascularSurgery: '0',
      cardiacCerebrovascularSurgeryIndicate: '',
      isCardiacCerebrovascularSurgeryMedication: '0',
      cardiacCerebrovascularSurgeryMedication: '',
      // 关节、瓣膜置换手术
      jointValveReplacementSurgery: '0',
      jointValveReplacementSurgeryIndicate: '',
      isJointValveReplacementSurgeryMedication: '0',
      jointValveReplacementSurgeryMedication: '',
      // 器官移植手术
      organTransplantSurgery: '0',
      organTransplantSurgeryIndicate: '',
      isOrganTransplantSurgeryMedication: '0',
      organTransplantSurgeryMedication: '',
      // 其他手术
      otherSurgery: '0',
      otherSurgeryIndicate: '',
      isOtherSurgeryMedication: '0',
      otherSurgeryMedication: '',
      // 妊娠期
      gestationPeriod: '0',
      gestationPeriodIndicate: '',
      isGestationPeriodMedication: '0',
      gestationPeriodMedication: '',
      // 直系亲属牙周炎病史
      immediateFamilyPeriodontitisHistory: '0',
      immediateFamilyPeriodontitisHistoryIndicate: '',
      isImmediateFamilyPeriodontitisHistoryMedication: '0',
      immediateFamilyPeriodontitisHistoryMedication: '',
      // 吸烟
      smoking: '0',
      smokingIndicate: '',
      isSmokingMedication: '0',
      smokingMedication: '',
      // 焦虑、神经紧张、压力
      anxietyNervousnessStress: '0',
      anxietyNervousnessStressIndicate: '',
      isAnxietyNervousnessStressMedication: '0',
      anxietyNervousnessStressMedication: '',
      // 其他疾病、长期药物治疗史
      otherDiseaseAndLongTreatment: '0',
      otherDiseaseAndLongTreatmentIndicate: '',
      isOtherDiseaseAndLongTreatmentMedication: '0',
      otherDiseaseAndLongTreatmentMedication: ''
    }
  }
  nextTick(() => {
    const scrollContainer =
      scrollbarRef.value.$el.querySelector(
        '.el-scrollbar__wrap'
      )
    if (scrollContainer) {
      scrollContainer.scrollTop = 0
    }
  })
})

const flag = ref(false)

// 打开抽屉
const open = async () => {
  // 打印 props.currentRecord
  // console.log('打开抽屉', props.currentRecord)

  // 将父组件传递的患者信息赋值给patientInfo
  patientInfo.value = {
    id: props.patient.id,
    name: props.patient.name,
    gender: props.patient.gender,
    age: props.patient.age,
    idCard: props.patient.idCard,
    birthTime: props.patient.birthTime
  }

  // 将父组件传递的问诊记录赋值给recordInfo
  recordInfo.value = {
    id: props.currentRecord.id,
    patientId: props.currentRecord.patientId,
    mainComplaint: props.currentRecord.mainComplaint,
    currentHistory: props.currentRecord.currentHistory,
    statue: props.currentRecord.statue
  }

  // 将父组件传递的患者病史赋值给patientHistory
  patientHistory.value = {
    ...props.currentRecord.patientHistory
  }

  // 创建一个 tempSystemicDiseaseRecord 对象, 用来储存父组件传递的全身病史
  const tempSystemicDiseaseRecord = {
    ...props.currentRecord.systemicDiseaseRecord
  }
  // 去除 tempSystemicDiseaseRecord 中的 id, patientId, recordId, createTime, updateTime, doctorId. isShowSymptom
  delete tempSystemicDiseaseRecord.id
  delete tempSystemicDiseaseRecord.patientId
  delete tempSystemicDiseaseRecord.recordId
  delete tempSystemicDiseaseRecord.createTime
  delete tempSystemicDiseaseRecord.updateTime
  delete tempSystemicDiseaseRecord.doctorId

  // console.log(
  //   '父组件传递的全身病史',
  //   tempSystemicDiseaseRecord
  // )

  // console.log(
  //   '默认全身病史',
  //   defaultSystemicDiseaseRecord.value
  // )

  // 判断 tempSystemicDiseaseRecord 是否为 defaultSystemicDiseaseRecord
  for (const key in tempSystemicDiseaseRecord) {
    if (
      tempSystemicDiseaseRecord[key] !==
      defaultSystemicDiseaseRecord.value[key]
    ) {
      // console.log(key)

      // console.log(
      //   '父组件传递的全身病史',
      //   key,
      //   tempSystemicDiseaseRecord[key]
      // )
      // console.log(
      //   '默认全身病史',
      //   key,
      //   defaultSystemicDiseaseRecord.value[key]
      // )

      flag.value = true
      break
    }
  }

  // 全身状况表, 判断 props.currentRecord.systemicDiseaseRecord 是否为 defaultSystemicDiseaseRecord
  if (flag.value) {
    // console.log('显示全身病史')

    // 将父组件传递的全身病史赋值给systemicDiseaseRecord
    // !!!! 展开运算符和直接赋值的区别: 展开运算符会将对象拆开, 而直接赋值不会拆开对象
    // !!!! 因此, 这里需要使用展开运算符来赋值对象, 而不是直接赋值
    systemicDiseaseRecord.value = {
      ...props.currentRecord.systemicDiseaseRecord
    }
    // console.log('显示全身病史', systemicDiseaseRecord.value)
    // 显示全身病史
    isShowSymptom.value = true
  } else {
    // console.log('不显示全身病史')
    // 设置为默认值
    systemicDiseaseRecord.value =
      defaultSystemicDiseaseRecord.value
    // 设置 id, patientId, recordId, createTime, updateTime, doctorId 为 props.currentRecord.systemicDiseaseRecord 的值
    systemicDiseaseRecord.value.id =
      props.currentRecord.systemicDiseaseRecord.id
    systemicDiseaseRecord.value.patientId =
      props.currentRecord.systemicDiseaseRecord.patientId
    systemicDiseaseRecord.value.recordId =
      props.currentRecord.systemicDiseaseRecord.recordId
    systemicDiseaseRecord.value.createTime =
      props.currentRecord.systemicDiseaseRecord.createTime
    systemicDiseaseRecord.value.updateTime =
      props.currentRecord.systemicDiseaseRecord.updateTime
    systemicDiseaseRecord.value.doctorId =
      props.currentRecord.systemicDiseaseRecord.doctorId

    // 显示全身病史
    isShowSymptom.value = false
  }

  // console.log('显示全身病史', systemicDiseaseRecord.value)

  // 口内图片
  if (props.currentRecord.mouthImages.length > 0) {
    // 将父组件传递的口内图片赋值给mouthImages
    // 将 props.currentRecord.mouthImages 数组拷贝给 mouthImages.value 的 url
    mouthImages.value = props.currentRecord.mouthImages.map(
      (item) => {
        count.value += 1
        return {
          url: item,
          id: count.value
        }
      }
    )
    // console.log('显示口内图片', mouthImages.value)
  }

  // 影像学检查图片
  if (props.currentRecord.imageCheck) {
    // 将父组件传递的影像学检查图片赋值给imageCheck
    imageCheck.value = props.currentRecord.imageCheck
  }

  // 显示抽屉
  visibleDrawer.value = true
}

// 向父组件暴露open
defineExpose({
  open
})

const isShowSymptom = ref(false)

// 属性访问问题：在某些情况下，直接访问普通对象的属性可能会返回undefined或空字符串（''），这可能会导致逻辑判断出错。
const defaultSystemicDiseaseRecord = ref({
  isShowSymptom: '0',
  // 高血压
  highBloodPressure: '0',
  highBloodPressureIndicate: '',
  isHighBloodPressureMedication: '0',
  highBloodPressureMedication: '',
  // 糖尿病
  diabetes: '0',
  diabetesIndicate: '',
  isDiabetesMedication: '0',
  diabetesMedication: '',
  // 冠心病
  coronaryHeartDisease: '0',
  coronaryHeartDiseaseIndicate: '',
  isCoronaryHeartDiseaseMedication: '0',
  coronaryHeartDiseaseMedication: '',
  // 脑血管疾病
  cerebrovascularDisease: '0',
  cerebrovascularDiseaseIndicate: '',
  isCerebrovascularDiseaseMedication: '0',
  cerebrovascularDiseaseMedication: '',
  // 动脉粥样硬化
  atherosclerosis: '0',
  atherosclerosisIndicate: '',
  isAtherosclerosisMedication: '0',
  atherosclerosisMedication: '',
  // 肺部疾病
  lungDisease: '0',
  lungDiseaseIndicate: '',
  isLungDiseaseMedication: '0',
  lungDiseaseMedication: '',
  // 胃肠道病
  gastrointestinalDisease: '0',
  gastrointestinalDiseaseIndicate: '',
  isGastrointestinalDiseaseMedication: '0',
  gastrointestinalDiseaseMedication: '',
  // 类风湿性关节炎
  rheumatoidArthritis: '0',
  rheumatoidArthritisIndicate: '',
  isRheumatoidArthritisMedication: '0',
  rheumatoidArthritisMedication: '',
  // 骨质疏松
  osteoporosis: '0',
  osteoporosisIndicate: '',
  isOsteoporosisMedication: '0',
  osteoporosisMedication: '',
  // 血液病
  hemopathy: '0',
  hemopathyIndicate: '',
  isHemopathyMedication: '0',
  hemopathyMedication: '',
  // 肝胆病
  hepatobiliaryDisease: '0',
  hepatobiliaryDiseaseIndicate: '',
  isHepatobiliaryDiseaseMedication: '0',
  hepatobiliaryDiseaseMedication: '',
  // 其他疾病
  otherDisease: '0',
  otherDiseaseIndicate: '',
  isOtherDiseaseMedication: '0',
  otherDiseaseMedication: '',
  // 心脑血管手术
  cardiacCerebrovascularSurgery: '0',
  cardiacCerebrovascularSurgeryIndicate: '',
  isCardiacCerebrovascularSurgeryMedication: '0',
  cardiacCerebrovascularSurgeryMedication: '',
  // 关节、瓣膜置换手术
  jointValveReplacementSurgery: '0',
  jointValveReplacementSurgeryIndicate: '',
  isJointValveReplacementSurgeryMedication: '0',
  jointValveReplacementSurgeryMedication: '',
  // 器官移植手术
  organTransplantSurgery: '0',
  organTransplantSurgeryIndicate: '',
  isOrganTransplantSurgeryMedication: '0',
  organTransplantSurgeryMedication: '',
  // 其他手术
  otherSurgery: '0',
  otherSurgeryIndicate: '',
  isOtherSurgeryMedication: '0',
  otherSurgeryMedication: '',
  // 妊娠期
  gestationPeriod: '0',
  gestationPeriodIndicate: '',
  isGestationPeriodMedication: '0',
  gestationPeriodMedication: '',
  // 直系亲属牙周炎病史
  immediateFamilyPeriodontitisHistory: '0',
  immediateFamilyPeriodontitisHistoryIndicate: '',
  isImmediateFamilyPeriodontitisHistoryMedication: '0',
  immediateFamilyPeriodontitisHistoryMedication: '',
  // 吸烟
  smoking: '0',
  smokingIndicate: '',
  isSmokingMedication: '0',
  smokingMedication: '',
  // 焦虑、神经紧张、压力
  anxietyNervousnessStress: '0',
  anxietyNervousnessStressIndicate: '',
  isAnxietyNervousnessStressMedication: '0',
  anxietyNervousnessStressMedication: '',
  // 其他疾病、长期药物治疗史
  otherDiseaseAndLongTreatment: '0',
  otherDiseaseAndLongTreatmentIndicate: '',
  isOtherDiseaseAndLongTreatmentMedication: '0',
  otherDiseaseAndLongTreatmentMedication: ''
})
</script>

<template>
  <!-- 抽屉 -->
  <el-drawer
    v-model="visibleDrawer"
    direction="rtl"
    size="41%"
    ref="drawerRef"
    :append-to-body="true"
    @opened="open"
  >
    <template v-slot:title>
      <el-text
        class="mx-1"
        type=""
        size="large"
        :strong="true"
      >
        患者信息
      </el-text>
    </template>
    <el-scrollbar ref="scrollbarRef" height="100%">
      <!-- 基本信息表单 -->
      <div class="base-info">
        <el-form
          disabled="true"
          size="large"
          label-width="80px"
          :model="patientInfo"
          ref="formRef"
          :rules="rules"
        >
          <!-- 姓名 -->
          <el-form-item
            label="患者姓名:"
            width="100px"
            prop="name"
          >
            <el-input
              v-model="patientInfo.name"
              placeholder="请输入患者姓名"
            ></el-input>
          </el-form-item>
          <!-- 性别 -->
          <el-form-item label="性别:" prop="gender">
            <div class="mb-2 flex items-center text-sm">
              <el-radio-group
                v-model="patientInfo.gender"
                class="ml-4"
              >
                <el-radio value="1" size="large"
                  >男</el-radio
                >
                <el-radio value="2" size="large"
                  >女</el-radio
                >
              </el-radio-group>
            </div>
          </el-form-item>
          <!-- 年龄 -->
          <el-form-item label="年龄:" prop="age">
            <el-input
              v-model="patientInfo.age"
              placeholder="请输入患者年龄"
            ></el-input>
          </el-form-item>
          <!-- 身份证号 -->
          <el-form-item label="身份证号:" prop="idCard">
            <el-input
              v-model="patientInfo.idCard"
              placeholder="请输入身份证号"
            ></el-input>
          </el-form-item>
          <!-- 出生日期 -->
          <el-form-item label="出生日期:" prop="birthTime">
            <el-date-picker
              v-model="patientInfo.birthTime"
              type="date"
              placeholder="请选择出生日期"
            ></el-date-picker>
          </el-form-item>
        </el-form>
      </div>

      <!-- 问诊表单 -->
      <div class="question-form">
        <el-form
          size="large"
          label-width="80px"
          :model="recordInfo"
        >
          <!-- 主诉, 30字 -->
          <el-form-item label="主诉:">
            <el-input
              type="textarea"
              placeholder="请输入主诉"
              maxlength="30"
              show-word-limit
              v-model="recordInfo.mainComplaint"
            ></el-input>
          </el-form-item>

          <!-- 现病史, 200字 -->
          <el-form-item label="现病史:">
            <el-input
              show-word-limit
              v-model="recordInfo.currentHistory"
              type="textarea"
              placeholder="请输入现病史"
              maxlength="200"
            ></el-input>
          </el-form-item>
        </el-form>

        <el-form
          size="large"
          label-width="80px"
          :model="patientHistory"
        >
          <!-- 既往病史, 200字 -->
          <el-form-item label="既往病史:">
            <el-input
              v-model="patientHistory.pastHistory"
              show-word-limit
              type="textarea"
              placeholder="请输入既往病史"
              maxlength="200"
            ></el-input>
          </el-form-item>

          <!-- 个人史, 150字 -->
          <el-form-item label="个人史:">
            <el-input
              v-model="patientHistory.personalHistory"
              show-word-limit
              type="textarea"
              placeholder="请输入个人史"
              maxlength="150"
            ></el-input>
          </el-form-item>

          <!-- 家族史, 150字 -->
          <el-form-item label="家族史:">
            <el-input
              v-model="patientHistory.familyHistory"
              type="textarea"
              show-word-limit
              placeholder="请输入家族史"
              maxlength="150"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>

      <!-- 全身状况表单 -->
      <div class="system-condition">
        <el-form
          size="large"
          label-width="190px"
          :model="systemicDiseaseRecord"
          label-position="left"
        >
          <!-- 全身疾病, 有无 -->
          <el-form-item label="全身疾病:">
            <el-radio
              v-model="isShowSymptom"
              size="large"
              :label="false"
              >无</el-radio
            >
            <el-radio
              v-model="isShowSymptom"
              size="large"
              :label="true"
            >
              有 (回答下列问题)
            </el-radio>
          </el-form-item>

          <!-- 高血压, 有无 -->
          <el-form-item label="高血压:">
            <SymptomRadio
              :showRadio="isShowSymptom"
              v-model:disease="
                systemicDiseaseRecord.highBloodPressure
              "
              v-model:indicate="
                systemicDiseaseRecord.highBloodPressureIndicate
              "
              v-model:medication="
                systemicDiseaseRecord.highBloodPressureMedication
              "
              v-model:isMedication="
                systemicDiseaseRecord.isHighBloodPressureMedication
              "
            ></SymptomRadio>
          </el-form-item>
          <!-- 糖尿病, 有无 -->
          <el-form-item label="糖尿病:">
            <SymptomRadio
              :showRadio="isShowSymptom"
              v-model:disease="
                systemicDiseaseRecord.diabetes
              "
              v-model:indicate="
                systemicDiseaseRecord.diabetesIndicate
              "
              v-model:medication="
                systemicDiseaseRecord.diabetesMedication
              "
              v-model:isMedication="
                systemicDiseaseRecord.isDiabetesMedication
              "
            ></SymptomRadio>
          </el-form-item>

          <!-- 冠心病, 有无 -->
          <el-form-item label="冠心病:">
            <SymptomRadio
              :showRadio="isShowSymptom"
              v-model:disease="
                systemicDiseaseRecord.coronaryHeartDisease
              "
              v-model:indicate="
                systemicDiseaseRecord.coronaryHeartDiseaseIndicate
              "
              v-model:medication="
                systemicDiseaseRecord.coronaryHeartDiseaseMedication
              "
              v-model:isMedication="
                systemicDiseaseRecord.isCoronaryHeartDiseaseMedication
              "
            ></SymptomRadio>
          </el-form-item>

          <!-- 脑血管病, 有无 -->
          <el-form-item label="脑血管病:">
            <SymptomRadio
              :showRadio="isShowSymptom"
              v-model:disease="
                systemicDiseaseRecord.cerebrovascularDisease
              "
              v-model:indicate="
                systemicDiseaseRecord.cerebrovascularDiseaseIndicate
              "
              v-model:medication="
                systemicDiseaseRecord.cerebrovascularDiseaseMedication
              "
              v-model:isMedication="
                systemicDiseaseRecord.isCerebrovascularDiseaseMedication
              "
            ></SymptomRadio>
          </el-form-item>

          <!-- 动脉粥样硬化, 有无 -->
          <el-form-item label="动脉粥样硬化:">
            <SymptomRadio
              :showRadio="isShowSymptom"
              v-model:disease="
                systemicDiseaseRecord.atherosclerosis
              "
              v-model:indicate="
                systemicDiseaseRecord.atherosclerosisIndicate
              "
              v-model:medication="
                systemicDiseaseRecord.atherosclerosisMedication
              "
              v-model:isMedication="
                systemicDiseaseRecord.isAtherosclerosisMedication
              "
            ></SymptomRadio>
          </el-form-item>
          <!-- 肺部疾病, 有无 -->
          <el-form-item label="肺部疾病:">
            <SymptomRadio
              :showRadio="isShowSymptom"
              v-model:disease="
                systemicDiseaseRecord.lungDisease
              "
              v-model:indicate="
                systemicDiseaseRecord.lungDiseaseIndicate
              "
              v-model:medication="
                systemicDiseaseRecord.lungDiseaseMedication
              "
              v-model:isMedication="
                systemicDiseaseRecord.isLungDiseaseMedication
              "
            ></SymptomRadio>
          </el-form-item>
          <!-- 胃肠道病, 有无 -->
          <el-form-item label="胃肠道病:">
            <SymptomRadio
              :showRadio="isShowSymptom"
              v-model:disease="
                systemicDiseaseRecord.gastrointestinalDisease
              "
              v-model:indicate="
                systemicDiseaseRecord.gastrointestinalDiseaseIndicate
              "
              v-model:medication="
                systemicDiseaseRecord.gastrointestinalDiseaseMedication
              "
              v-model:isMedication="
                systemicDiseaseRecord.isGastrointestinalDiseaseMedication
              "
            ></SymptomRadio>
          </el-form-item>
          <!-- 类风湿性关节炎, 有无 -->
          <el-form-item label="类风湿性关节炎:">
            <SymptomRadio
              :showRadio="isShowSymptom"
              v-model:disease="
                systemicDiseaseRecord.rheumatoidArthritis
              "
              v-model:indicate="
                systemicDiseaseRecord.rheumatoidArthritisIndicate
              "
              v-model:medication="
                systemicDiseaseRecord.rheumatoidArthritisMedication
              "
              v-model:isMedication="
                systemicDiseaseRecord.isRheumatoidArthritisMedication
              "
            ></SymptomRadio>
          </el-form-item>
          <!-- 骨质疏松, 有无 -->
          <el-form-item label="骨质疏松:">
            <SymptomRadio
              :showRadio="isShowSymptom"
              v-model:disease="
                systemicDiseaseRecord.osteoporosis
              "
              v-model:indicate="
                systemicDiseaseRecord.osteoporosisIndicate
              "
              v-model:medication="
                systemicDiseaseRecord.osteoporosisMedication
              "
              v-model:isMedication="
                systemicDiseaseRecord.isOsteoporosisMedication
              "
            ></SymptomRadio>
          </el-form-item>
          <!-- 血液病, 有无 -->
          <el-form-item label="血液病:">
            <SymptomRadio
              :showRadio="isShowSymptom"
              v-model:disease="
                systemicDiseaseRecord.hemopathy
              "
              v-model:indicate="
                systemicDiseaseRecord.hemopathyIndicate
              "
              v-model:medication="
                systemicDiseaseRecord.hemopathyMedication
              "
              v-model:isMedication="
                systemicDiseaseRecord.isHemopathyMedication
              "
            ></SymptomRadio>
          </el-form-item>
          <!-- 肝胆疾病, 有无 -->
          <el-form-item label="肝胆疾病:">
            <SymptomRadio
              :showRadio="isShowSymptom"
              v-model:disease="
                systemicDiseaseRecord.hepatobiliaryDisease
              "
              v-model:indicate="
                systemicDiseaseRecord.hepatobiliaryDiseaseIndicate
              "
              v-model:medication="
                systemicDiseaseRecord.hepatobiliaryDiseaseMedication
              "
              v-model:isMedication="
                systemicDiseaseRecord.isHepatobiliaryDiseaseMedication
              "
            ></SymptomRadio>
          </el-form-item>
          <!-- 其他疾病, 有无 -->
          <el-form-item label="其他疾病:">
            <SymptomRadio
              :showRadio="isShowSymptom"
              v-model:disease="
                systemicDiseaseRecord.otherDisease
              "
              v-model:indicate="
                systemicDiseaseRecord.otherDiseaseIndicate
              "
              v-model:medication="
                systemicDiseaseRecord.otherDiseaseMedication
              "
              v-model:isMedication="
                systemicDiseaseRecord.isOtherDiseaseMedication
              "
            ></SymptomRadio>
          </el-form-item>
          <!-- 心、脑血管手术, 有无 -->
          <el-form-item label="心、脑血管手术:">
            <SymptomRadio
              :showRadio="isShowSymptom"
              v-model:disease="
                systemicDiseaseRecord.cardiacCerebrovascularSurgery
              "
              v-model:indicate="
                systemicDiseaseRecord.cardiacCerebrovascularSurgeryIndicate
              "
              v-model:medication="
                systemicDiseaseRecord.cardiacCerebrovascularSurgeryMedication
              "
              v-model:isMedication="
                systemicDiseaseRecord.isCardiacCerebrovascularSurgeryMedication
              "
            ></SymptomRadio>
          </el-form-item>
          <!-- 关节、瓣膜置换手术, 有无 -->
          <el-form-item label="关节、瓣膜置换手术:">
            <SymptomRadio
              :showRadio="isShowSymptom"
              v-model:disease="
                systemicDiseaseRecord.jointValveReplacementSurgery
              "
              v-model:indicate="
                systemicDiseaseRecord.jointValveReplacementSurgeryIndicate
              "
              v-model:medication="
                systemicDiseaseRecord.jointValveReplacementSurgeryMedication
              "
              v-model:isMedication="
                systemicDiseaseRecord.isJointValveReplacementSurgeryMedication
              "
            ></SymptomRadio>
          </el-form-item>
          <!-- 器官移植手术, 有无 -->
          <el-form-item label="器官移植手术:">
            <SymptomRadio
              :showRadio="isShowSymptom"
              v-model:disease="
                systemicDiseaseRecord.organTransplantSurgery
              "
              v-model:indicate="
                systemicDiseaseRecord.organTransplantSurgeryIndicate
              "
              v-model:medication="
                systemicDiseaseRecord.organTransplantSurgeryMedication
              "
              v-model:isMedication="
                systemicDiseaseRecord.isOrganTransplantSurgeryMedication
              "
            ></SymptomRadio>
          </el-form-item>
          <!-- 其他手术, 有无 -->
          <el-form-item label="其他手术:">
            <SymptomRadio
              :showRadio="isShowSymptom"
              v-model:disease="
                systemicDiseaseRecord.otherSurgery
              "
              v-model:indicate="
                systemicDiseaseRecord.otherSurgeryIndicate
              "
              v-model:medication="
                systemicDiseaseRecord.otherSurgeryMedication
              "
              v-model:isMedication="
                systemicDiseaseRecord.isOtherSurgeryMedication
              "
            ></SymptomRadio>
          </el-form-item>
          <!-- 妊娠期, 有无 -->
          <el-form-item label="妊娠期:">
            <SymptomRadio
              :showRadio="isShowSymptom"
              v-model:disease="
                systemicDiseaseRecord.gestationPeriod
              "
              v-model:indicate="
                systemicDiseaseRecord.gestationPeriodIndicate
              "
              v-model:medication="
                systemicDiseaseRecord.gestationPeriodMedication
              "
              v-model:isMedication="
                systemicDiseaseRecord.isGestationPeriodMedication
              "
            ></SymptomRadio>
          </el-form-item>
          <!-- 直系亲属牙周炎病史, 有无 -->
          <el-form-item label="直系亲属牙周炎病史:">
            <SymptomRadio
              :showRadio="isShowSymptom"
              v-model:disease="
                systemicDiseaseRecord.immediateFamilyPeriodontitisHistory
              "
              v-model:indicate="
                systemicDiseaseRecord.immediateFamilyPeriodontitisHistoryIndicate
              "
              v-model:medication="
                systemicDiseaseRecord.immediateFamilyPeriodontitisHistoryMedication
              "
              v-model:isMedication="
                systemicDiseaseRecord.isImmediateFamilyPeriodontitisHistoryMedication
              "
            ></SymptomRadio>
          </el-form-item>
          <!-- 吸烟, 有无 -->
          <el-form-item label="吸烟:">
            <SymptomRadio
              :showRadio="isShowSymptom"
              v-model:disease="
                systemicDiseaseRecord.smoking
              "
              v-model:indicate="
                systemicDiseaseRecord.smokingIndicate
              "
              v-model:medication="
                systemicDiseaseRecord.smokingMedication
              "
              v-model:isMedication="
                systemicDiseaseRecord.isSmokingMedication
              "
            ></SymptomRadio>
          </el-form-item>
          <!-- 焦虑、紧张、压力，有无 -->
          <el-form-item
            label="焦虑、紧张、压力:"
            prop="anxiety"
          >
            <SymptomRadio
              :showRadio="isShowSymptom"
              v-model:disease="
                systemicDiseaseRecord.anxietyNervousnessStress
              "
              v-model:indicate="
                systemicDiseaseRecord.anxietyNervousnessStressIndicate
              "
              v-model:medication="
                systemicDiseaseRecord.anxietyNervousnessStressMedication
              "
              v-model:isMedication="
                systemicDiseaseRecord.isAnxietyNervousnessStressMedication
              "
            ></SymptomRadio>
          </el-form-item>
          <!-- 其他疾病、长期药物治疗史， 有无 -->
          <el-form-item label="其他疾病、长期药物治疗史:">
            <SymptomRadio
              :showRadio="isShowSymptom"
              v-model:disease="
                systemicDiseaseRecord.otherDiseaseAndLongTreatment
              "
              v-model:indicate="
                systemicDiseaseRecord.otherDiseaseAndLongTreatmentIndicate
              "
              v-model:medication="
                systemicDiseaseRecord.otherDiseaseAndLongTreatmentMedication
              "
              v-model:isMedication="
                systemicDiseaseRecord.isOtherDiseaseAndLongTreatmentMedication
              "
            ></SymptomRadio>
          </el-form-item>
        </el-form>
      </div>

      <!-- 口内照片 -->
      <div class="mouth-image-card">
        <div class="image-grid">
          <div
            v-for="(image, index) in mouthImages"
            :key="index"
            class="image-container"
          >
            <el-image
              class="avatar"
              :src="image.url"
              fit="cover"
            />
            <div class="image-overlay" @click.stop>
              <el-button
                type="primary"
                circle
                plain
                @click="handlePreviewMouthImage(index)"
              >
                <el-icon> <View /></el-icon>
              </el-button>
              <el-button
                type="danger"
                circle
                plain
                @click="deleteMouthImage(index)"
              >
                <el-icon> <Delete /></el-icon>
              </el-button>
            </div>
          </div>
          <el-upload
            v-if="mouthImages.length < 9"
            ref="mouthImageUploadRef"
            class="avatar-uploader"
            :auto-upload="false"
            :show-file-list="false"
            :on-change="onUploadMouthImage"
            multiple
          >
            <el-icon class="avatar-uploader-icon">
              <Plus />
            </el-icon>
          </el-upload>
        </div>
      </div>
      <el-dialog
        class="image-check-preview-dialog"
        top="5vh"
        v-model="previewMouthImageVisible"
        title="图片预览"
        width="700px"
      >
        <el-image
          :src="currentPreviewImage.url"
          fit="contain"
          class="full-image"
        />
      </el-dialog>

      <!-- 影像学检查图片 -->
      <div class="image-check-card">
        <el-upload
          ref="imageCheckUploadRef"
          class="avatar-uploader"
          :auto-upload="false"
          :show-file-list="false"
          :on-change="onUploadImageCheck"
        >
          <div v-if="imageCheck" class="image-container">
            <el-image
              class="avatar"
              :src="imageCheck"
              fit="cover"
              :preview-src-list="[imageCheck]"
              :initial-index="0"
              hide-on-click-modal
            />
            <div class="image-overlay" @click.stop>
              <el-button
                type="primary"
                circle
                plain
                @click="handlePreview"
              >
                <el-icon> <View /></el-icon>
              </el-button>
              <el-button
                type="danger"
                circle
                plain
                @click="deleteImageCheck"
              >
                <el-icon> <Delete /></el-icon>
              </el-button>
            </div>
          </div>
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </div>
      <el-dialog
        class="image-check-preview-dialog"
        top="5vh"
        v-model="previewImageCheckVisible"
        title="图片预览"
        width="700px"
      >
        <el-image
          :src="imageCheck"
          fit="contain"
          class="full-image"
        />
      </el-dialog>

      <!-- 按钮 -->
      <div class="button-group">
        <el-button type="primary" @click="submit">
          提交
        </el-button>
        <el-button @click="visibleDrawer = false">
          取消
        </el-button>
      </div>
    </el-scrollbar>
  </el-drawer>
</template>

<style scoped lang="scss">
// 设置输入框的宽度
.el-input {
  width: 70%;
}

.el-scrollbar {
  // 设置位置往上偏移
  margin-top: -20px;
}

// 基本信息
.base-info {
  // 设置边框
  border: 3px solid #dcdfe6;
  // 设置内边距
  padding: 20px;
  // 设置下边距
  margin-bottom: 20px;
}

.question-form {
  // 设置边框
  border: 3px solid #dcdfe6;
  // 设置内边距
  padding: 20px;
  // 设置下边距
  margin-bottom: 20px;
}

.system-condition {
  // 设置边框
  border: 3px solid #dcdfe6;
  // 设置内边距
  padding: 20px;
  // 设置下边距
  margin-bottom: 20px;
  .el-input {
    // 设置大小
    height: 20px;
    :deep(.el-input__wrapper) {
      padding-bottom: -10px;
      box-shadow: none; // 去掉阴影
      border: none; // 去掉边框
      .el-input__inner {
        border: none; // 去掉内部输入框的边框
        border-bottom: 1px solid;
        // 设置边框距离底部的距离
        font-size: 14px
          var(
            --el-input-border-color,
            var(--el-border-color)
          ); // 只显示底部边框
        cursor: default !important;
      }
    }
  }

  .checkbox-first-group {
    .checkbox-second-group {
      // 设置向右偏移
      margin-left: -40px;
      // tiltle和checbox位于同一行
      display: flex;
      .title {
        // 设置右边距
        margin-right: 10px;
        // 设置字体颜色
        color: #606266;
      }
    }
  }
}

// 影像学检查图片卡片
.image-check-card {
  // 设置边框
  border: 3px solid #dcdfe6;
  // 设置内边距
  padding: 20px;
  // 设置下边距
  margin-bottom: 20px;
  .avatar-uploader {
    display: inline-block;
    text-align: center;

    :deep() {
      .avatar {
        width: 178px;
        height: 178px;
        display: block;
      }
      .el-upload {
        border: 2px dashed var(--el-border-color);
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: var(--el-transition-duration-fast);
      }
      .el-upload:hover {
        border-color: var(--el-color-primary);
      }
      .el-icon.avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        text-align: center;
      }
    }
  }

  .image-container {
    position: relative;
    display: inline-block;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s;
  }

  .image-container:hover .image-overlay {
    opacity: 1;
  }
}
// 影像学检查图片预览对话框
.image-check-preview-dialog {
  .full-image {
    width: 100%;
    height: 80%;
  }
}

// 口内照片卡片
.mouth-image-card {
  // 设置边框
  border: 3px solid #dcdfe6;
  // 设置内边距
  padding: 20px;
  // 设置下边距
  margin-bottom: 20px;
  .image-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* 调整图片之间的间距 */
  }

  .image-container {
    position: relative;
    display: inline-block;
    margin-right: 10px;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
    border: 2px solid var(--el-border-color); /* 为已上传的图片添加边框 */
  }

  .avatar-uploader {
    border: 2px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
    width: 178px;
    height: 178px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .avatar-uploader:hover {
    border-color: var(--el-color-primary);
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
  }

  .image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s;
  }

  .image-container:hover .image-overlay {
    opacity: 1;
  }

  .full-image {
    width: 100%;
    height: 80%;
  }
}
// 口内照片预览对话框
.mouth-image-preview-dialog {
  .full-image {
    width: 100%;
    height: 80%;
  }
}

// 设置按钮的样式
.button-group {
  // 距离上面20px
  margin-top: 30px;
  // 左一点的位置
  margin-left: 100px;
  // 设置按钮间距
  button {
    margin-right: 20px;
  }
}
</style>
